<!-- eslint-disable vue/multi-word-component-names -->
<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<span>
				<el-select v-model="queryParams.projectCode" filterable class="zs-select-md zs-space-right-sm" placeholder="项目名称">
					<el-option v-for="item in projectList" :key="item.biProjectCode" :label="item.projectName" :value="item.biProjectCode" />
				</el-select>
				<el-button class="zs-btn-plain" @click="queryList()">查询</el-button>
			</span>
			<span class="zs-layout-flex-row">
				<el-button class="zs-btn-plain" @click="handleDownload"
					><el-icon class="el-icon--left"> <Upload /> </el-icon>导出</el-button
				>
			</span>
		</div>
		<div class="zs-card zs-table-page-content">
			<hsPageTable :loading="tableData.loading" :total="tableData.total" :tableData="tableData.data" :tableTips="tableData.tableTips" :cloumns="tableData.cloumns" @pageChange="pageChange" @sortChange="tableSortChange">
				<!-- <template #column>
                    <el-table-column label="操作" width="100" align="center">
                        <template #default="{ row }">
                            <el-button class="zs-link" link size="small" @click="handleJumpMapPage(row)">查看</el-button>
                        </template>
                    </el-table-column>
                </template> -->
			</hsPageTable>
		</div>
	</div>
</template>

<script setup lang="jsx">
	import dbPublicApi from '@/api/dbPublic';
	import { abnormalPlateNumDetailApi, abnormalPlateNumDetailExportApi } from '@/api/Manage/Business/detailPages';
	import { ref, reactive } from 'vue';
	import { toThousands } from '@/utils/number-util';
	import { downloadNewFile } from '@/utils/publicUtils';
	import { useRoute, useRouter } from 'vue-router';
	import { useStore } from 'vuex';
	let store = useStore();
	const route = useRoute();
	const router = useRouter();
	const curPageSize = ref(store.state.uiPageSizeDefault);
	const { biProjectCode, dataTime, resourceKey } = route.query;

	let queryParams = reactive({
		pageNum: 1,
		pageSize: curPageSize.value,
		projectCode: biProjectCode, //项目Code
	});

	let tableData = reactive({
		loading: false,
		total: 0,
		data: [],
		cloumns: [
			{ prop: 'carNo', label: '车牌号', align: 'center' },
			{
				prop: 'abnormalAmount',
				label: '异常次数',
				align: 'center',
				sortable: 'custom',
				type: 'html',
				render: ({ row }) => {
					return (
						<el-link type='primary' disabled={row.abnormalAmount < 0} underline={false} onClick={() => goInfo(row)}>
							{row.abnormalAmount}
						</el-link>
					);
				},
			},
			{
				prop: 'parkHours',
				label: '停留时长',
				align: 'center',
				sortable: 'custom',
				type: 'html',
				render: ({ row }) => {
					return (
						<el-link type='primary' underline={false} onClick={() => goInfo(row)}>
							{row.parkHours}
						</el-link>
					);
				},
			},
			{
				prop: 'abnormalCost',
				label: '异常费用',
				align: 'right',
				sortable: 'custom',
				type: 'html',
				render: ({ row }) => {
					return (
						<el-link type='primary' underline={false} onClick={() => goInfo(row)}>
							{toThousands(row.abnormalCost)}
						</el-link>
					);
				},
			},
			{ prop: 'carMobile', label: '联系方式', align: 'center' },
		],
		tableTips: ['*异常费用：元'],
	});
	// 分页变化
	function pageChange(page) {
		queryParams.pageNum = page.current;
		queryParams.pageSize = page.pageSize;
		queryList();
	}
	function queryList() {
		tableData.loading = true;
		abnormalPlateNumDetailApi(queryParams).then(res => {
			let resData = res.data;
			if (resData.errorCode == 200) {
				tableData.data = resData.data;
				tableData.total = resData.totalCount;
			}
			tableData.loading = false;
		});
	}
	queryList();

	let projectList = ref([]); // 项目列表
	// 获取项目列表
	const getPorjectList = async () => {
		await dbPublicApi.queryProjectPcApi({ dataTime, resourceKey }).then(res => {
			if (res.data.code == 200) {
				projectList.value = res.data.data;
			}
		});
	};
	getPorjectList();

	// 导出
	async function handleDownload() {
		const fileName = `车牌明细.xls`;
		let fileData = await abnormalPlateNumDetailExportApi({ projectCode: queryParams.projectCode });
		downloadNewFile(fileData.data, fileName);
	}

	//排序
	async function tableSortChange(data) {
		console.log(data);
		queryParams.orderField = data.order ? data.prop : '';
		queryParams.sort = data.order == 'ascending' ? 'asc' : data.order == 'descending' ? 'desc' : '';
		queryList();
	}

	const goInfo = row => {
		router.push({
			path: '/page/routeController/index',
			query: {
				rid: 'Manage/Business/abnormalPoleLifting/abnormalDetail',
				rTitle: '异常明细',
				biProjectCode: queryParams.projectCode,
				dataTime: dataTime,
				resourceKey: resourceKey,
				carNo: row.carNo,
			},
		});
	};
</script>
